import { defineConfig, presetAttributify, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
  theme: {
    colors: {
      default: {
        DEFAULT: '#041a21'
      },
      primary: '#1C53D9',
      success: '#10b981',
      info: '#2196f3',
      warning: '#f59e0b',
      error: '#ef4444',
      danger: '#f56c6c',
      main: {
        DEFAULT: '#0c0c0c',
        1: '#555555',
        2: '#a2a2a2',
        3: '#a0a0a0'
      },
      divider: {
        DEFAULT: '#e0e0e0',
        1: '#eeeeee',
        2: '#e6e6e6',
        3: '#f5f5f5'
      },
      red: '#f00000'
    },
    fontSize: {
      xs: ['12px', null],
      sm: ['14px', null],
      base: ['16px', null],
      lg: ['18px', null],
      xl: ['20px', null],
      '2xl': ['24px', null],
      '3xl': ['30px', null]
    },
    fontFamily: {
      sc: ['PingFang SC'],
      impact: ['Impact'],
      ShuHeiTi: ['Alimama ShuHeiTi']
    }
  },
  shortcuts: [
    {
      'flex-center': 'flex justify-center items-center',
      'flex-between': 'flex justify-between items-center',
      'flex-around': 'flex justify-around items-center',
      'transform-center': 'top-50% left-50% translate--50%',
      border: 'border-1 border-solid border-gray-300'
    }
  ],
  rules: [
    [
      /^line-clamp-(\d+)$/,
      ([, value]) => ({
        overflow: 'hidden',
        display: '-webkit-box',
        'word-break': 'break-all',
        '-webkit-box-orient': 'vertical',
        '-webkit-line-clamp': `${value}`
      })
    ]
  ],
  presets: [presetRemToPx({ baseFontSize: 4 }), presetAttributify(), presetUno()],
  transformers: [transformerDirectives(), transformerVariantGroup()]
})
